<template>
  <div class="inner-knowledgebase">
    <div class="search">
      <input
        class="input"
        v-model.trim="searchWord"
        @keyup.enter="onSearch"
        placeholder="搜索"
      />
    </div>
    <div class="tree">
      <el-tree
        icon-class="el-icon-arrow-up"
        :data="dataList"
        accordion
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <p v-if="data.pcode == '0'" class="title-label" :class="data.id == '0'?'user-item':''">{{ node.label }}</p>
          <div v-else>
            <p class="content-label">问题：{{ node.label }}</p>
            <p class="content-answer">答案：{{ data.solution }}</p>
            <div class="operate">
              <el-button plain size="mini" @click="() => edit(data)">
                编辑
              </el-button>
              <el-button plain size="mini" @click="() => send(data)">
                发送
              </el-button>
            </div>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { queryTreeList } from "@/api/knowlegeBase";
import { mapState,mapMutations } from "vuex";

export default {
  name: "inner-knowledgebase",
  data() {
    return {
      searchWord: "",
      defaultProps: {
        children: "listTree",
        label: "issueDesc",
      },
      dataList: [],
      dataListLoading: false,
      userItem:{}
    };
  },
  created() {
    this.getDataList();
  },
  computed:{
      ...mapState(['idStore'])
  },
  methods: {
    ...mapMutations(["setShortcutContent"]),
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      const params = {
        pageSize: 1000,
        pageNum: 1,
        searchName: this.searchWord,
      };
      this.dataList = [];
      queryTreeList(params)
        .then((res) => {
          const { data } = res;
          data.forEach((item) => {
            if(item.id == '0'){
                this.userItem = item
            }else if (item.listTree instanceof Array) {
              this.dataList.push(item);
            }
          });
          // 将用户自定义的数据放在最上面
          const listTree = this.userItem.listTree.filter((node)=>node.waiterId ===  this.idStore.waiterId)
          if(listTree.length){
            this.userItem.listTree = listTree
            this.dataList.unshift(this.userItem)
          }
        })
        .catch(() => {
          this.$message.error(`获取知识库异常`);
        })
        .finally(() => {
          this.dataListLoading = false;
        });
    },
    onSearch() {
      this.getDataList();
    },
    handleNodeClick(data) {
      if (data.pcode != 0) {
        this.selectNode = data.solution;
      }
    },

    edit(data) {
      const params = { type: 0, txt: data.solution };
      this.setShortcutContent(params);
    },
    send(data) {
      const params = { type: 1, txt: data.solution };
      this.setShortcutContent(params);
    },
  },
};
</script>

<style lang="scss" scoped>
.inner-knowledgebase {
  margin-top: 10px;
}
.search {
  padding: 0 15px;
  .input {
    height: 30px;
    width: 100%;
    line-height: 30px;
    padding: 0 10px;
    background: #e2e2e2;
    border: 1px solid #e6e6e6;
    border-radius: 1px;
  }
}
.tree {
  height: 540px;
  overflow-y: auto;
  .el-tree {
    background: transparent;
     ::v-deep .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  .custom-tree-node {
    width: calc(100% - 24px);
    border-bottom: 1px solid #e6e6e6;
    .user-item{
      color: #19A094;
    }
  }
  .title-label {
    
    height: 50px;
    line-height: 50px;
    width: 100%;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  .content-label {
    line-height: 2;
    padding-right:15px ;
    width: 100%;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  .content-answer{
     width: 100%;
     line-height: 1.5;
     padding-right:15px ;
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
     opacity: 0.7;
  }

  ::v-deep .el-tree-node__content {
    height: auto;
    width: 100%;
  }
  .operate {
    padding: 10px 15px;
    text-align: right;
  }
  .el-button {
    padding: 2px 10px;
    font-size: 14px;
    color: #1e9fff;
    border-color: #1e9fff;
  }
}
.edit {
  margin-top: 10px;
  height: 40px;
  display: flex;
  .select-node {
    text-align: left;
    padding: 0 10px;
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 40px;
    color: #999;
  }
}
</style>